<template>
  <!--  整个页面的div-->
  <div class="tab_home">
    <!--1-1标题-->
    <div class="home-title">
      基因实验室
    </div>
    <!--1-2第一张图片-->
    <van-swipe :autoplay="5000" :height="200">
      <van-swipe-item v-for="(banner, index) in banners" :key="index">
                <img v-lazy="banner.image" width="100%" v-on:click="openLink(banner.link)"/>
<!--        <img src="../../assets/images/tab-home/home-first.png" height="100%" width="100%" v-on:click="openLink(banner.link)"/>-->
      </van-swipe-item>
    </van-swipe>
    <!--1-3新手必看等三个组件-->
    <van-row class="home-links">
      <van-col span="8">
        <van-icon name="pending-payment" v-on:click="redirectTo('help')"/>
        新手必看
      </van-col>
      <van-col span="8">
        <van-icon name="tosend" v-on:click="redirectTo('hot')"/>
        优惠活动
      </van-col>
      <van-col span="8">
        <van-icon name="logistics" v-on:click="redirectTo('report')"/>
        报告预览
      </van-col>
    </van-row>

    <!--1-4热销产品描述-->
    <div class="home-describe">
      <span class="home-context1">限时特惠</span>
      <span class="home-context2">限时火拼疯抢中</span>
    </div>
    <!--1-4热销产品图片-->
    <!--    <img v-lazy="imageHotProduct" class="img-common" width="100%"/>-->
    <!-----------1-5制作第一个卡片！！！------------->
    <div v-for="(product, index) in products">
<!--      如果存在抢购两个字就返回1，不存在就返回-1-->
      <div class="card-container" v-if="product.detail.search('抢购') !== -1" :key="index">
      <!--1-5-1上面第二张图片-->
      <div class="top-box">
        <!--        <img class="img-common" data-src="http://134.175.137.231/media/banner/ad/details1_G1D5WAG.png" src="http://134.175.137.231/media/banner/ad/details1_G1D5WAG.png" lazy="loaded">-->
        <img class="img-common" :src="product.thumb"/>
      </div>
      <!--下面是文字和价钱描述 -->
      <div class="bottom-box">
        <!--左边的价格描述-->
        <div class="left-box">
          <div class="box-title">{{product.title}}</div>
          <div>
            <span class="box-price">{{product.price}}</span>
            <span class="box-price-des">特惠价</span>
            <del>原价：{{product.price}}</del>
          </div>
        </div>
        <!--      右边的抢购-->
        <span @click="toClickBt(product.id)">抢购</span>
      </div>
    </div>
    </div>
    <!-----------1-6制作第2个卡片！！！------------->
    <div class="home-describe">
      <span class="home-context1">热销产品</span>
      <span class="home-context2">热门风暴 超值继续</span>
    </div>

    <!--盒子放置两张卡片-->
    <van-row tyle="flex">
      <div v-for="(product, index) in products">
      <c-card-box
        v-if="product.detail.search('抢购') === -1"
        :key="index"
        :cardItems="product"
        @toClickBt="toClickBt(product.id)"></c-card-box>
      </div>
    </van-row>
    <!--    1-7流程检测-->
    <div class="home-describe">
      <span class="home-context1">检测流程</span>
      <span class="home-context2">流程早知道 省心又安心</span>
    </div>

    <!--1-6第三张图片-->
    <!--流程检测图片-->
    <div class="card-container">
      <img v-lazy="imageWorkFlow" width="100%" class="home-imgtest"/>
    </div>
    <!--    1-8了解我们-->
    <div class="home-describe">
      <span class="home-context1">了解我们</span>
      <span class="home-context2">我怕很单纯 用心致纯</span>
    </div>
    <!--1-9 三个列表-->
    <div class="card-container">
      <ul>
        <!--每个li由图片和文字描述组成-->
        <li>
          <div class="li-span">
            <img src="../../assets/images/tab-home/home-list1.png"  class="li-img"/>
            <!--文字包括标题和内容概括 整体定义一个margin-->
            <div class="li-font">
              <div class="li-title">基于检测的科学原理是什么</div>
              <div class="li-describe">让你秒懂基因，DNA，染色体的关系</div>
            </div>
          </div>
        </li>
        <li>
          <div class="li-span">
            <img src="../../assets/images/tab-home/home-list2.png"  class="li-img"/>
            <div class="li-font">
              <div class="li-title">基于检测的科学原理是什么</div>
              <div class="li-describe">让你秒懂基因，DNA，染色体的关系</div>
            </div>
          </div>
        </li>
        <li>
          <div class="li-span">
            <!--            <img v-lazy="imageWorkFlow"  class="li-img"/>-->
            <img src="../../assets/images/tab-home/home-list3.png"  class="li-img"/>
            <div class="li-font">
              <div class="li-title">基于检测的科学原理是什么</div>
              <div class="li-describe">让你秒懂基因，DNA，染色体的关系</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--1-10联系我们-->
    <div class="footer">
      <p><router-link to="/contactus">联系我们</router-link> | 客服电话：400-600-1887</p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
import { Swipe, SwipeItem, Row, Col, Toast } from 'vant'
import imageHotProduct from '../../assets/images/index_hot_product.png'
import imageWorkFlow from '@/assets/images/index_work_flow.png'
import CarBox from '@/components/carbox'

export default {
  name: 'tab-home',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Row.name]: Row,
    [Col.name]: Col,
    [CarBox.name]: CarBox
  },
  data () {
    return {
      imageHotProduct: imageHotProduct,
      imageWorkFlow: imageWorkFlow,
      banners: [],
      products: [],
      arr: '抢购'
    }
  },
  // async表示异步的意思，如果前面加上 async =false 就表示同步的方式运行，当程序读到这句话的要等到它运行完毕之后才执行下面的程序。
  async mounted () {
    this.setActiveTab(0)
    // await this.getFirstProduct()
    await this.getProducts()
    await this.getBanners()
    await this.getAllProducts()
  },
  methods: {
    toClickBt (id) {
      this.$router.push({ name: 'product', params: { id: id } })
    },
    // getFirstProduct () {
    //   console.log('in filter')
    //   return this.products ? this.products.filter(detail => detail === '抢购商品测试').shift() : null
    //
    // },
    async getProducts () {
      const { data } = await this.$api.product.productList()
      if (data.code !== 200) {
        Toast('网络错误，请重新刷新页面')
      } else {
        // 给data()中定义的空products赋值
        this.products = data.data
      }
      console.log('产品' + this.products)
    },
    async getBanners () {
      const { data } = await this.$api.banner.bannerList()
      if (data.code !== 200) {
        Toast('网络错误，请重新刷新页面')
      } else {
        this.banners = data.data
      }
      console.log('banner' + this.banners)
    },
    redirectTo: function (route) {
      this.$router.push({ name: route })
    },
    openLink: function (link) {
      this.$router.push(link)
    },
    ...mapMutations({
      setActiveTab: 'tabbar/setActiveTab'
    }),
    ...mapActions({
      getAllProducts: 'product/getAllProducts'
    })
  }
}
</script>

<style lang="less">
  /*写一个公用的字体样式*/
  .commom-style{
    position: relative;
    text-align: center;
    width: 100%;
    /*height: 40px;*/
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 600;
  }
  /*标题*/
  .home-title{
    .commom-style();
    font-size: large;
  }
  /*<!--1-4热销产品描述-->*/
  .home-describe{
    margin-bottom: 15px;
    margin-top: 15px;
  }
  /*限时特惠*/
  .home-context1{
    padding-left: 10px;
    font-size: 15px;
    .commom-style();
  }
  /*火拼*/
  .home-context2{
    color: #969799db;
    font-size: 13px;
    padding-left: 12px;
  }
  /*----------------第一张卡片的所有样式--------------！！*/
  /*因为卡片有三个 第一个宽度100% 第二三个要分别设置浮动 所以写一个共有卡片样式*/
  .card-common{
    background: rgb(255, 255, 255);

  }
  /*单个卡片的样式 我设置卡片和下面的距离有20px*/
  .card-container {
    /*margin: 0 15px 20px;*/
    margin: 0 0 10px 15px;
    width: 92%;
    .card-common();
  }
  .card-container2 {
    /*和左边距离15*/
    margin: 0 0 0 15px;
    .card-common();
    width: 44%;
    float: left;
  }
  .card-container3 {
    .card-common();
    /*和右边距离15*/
    margin: 0 15px 0 0;
    width: 44%;
    float: right;
  }
  /*把下面img中的放进来 合并成一个*/
  .top-box {
    /*.card-container .top-box {*/
    width: 100%;
    /*注释掉之后上面的图片变大*/
    /*height: 120px;*/
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    display: block;
  }
  /* img {*/
  /*   !*.card-container .top-box img {*!*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*   display: block;*/
  /*  -webkit-border-radius: 5px 5px 0 0;*/
  /*  -moz-border-radius: 5px 5px 0 0;*/
  /*  border-radius: 5px 5px 0 0;*/
  /*}*/
  .img-common {
    /*.card-container .top-box img {*/
    width: 100%;
    height: 100%;
    display: block;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
  }
  /*----------盒子下半部分-------*/
  .bottom-box {
    /*.card-container .bottom-box {*/
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-box-shadow: 0 3px 20px rgb(226, 230, 229);
    -moz-box-shadow: 0 3px 20px rgb(226, 230, 229);
    box-shadow: 0 3px 20px rgb(226, 230, 229);
    /*padding: 15px 30px;*/

  }
  /*左边盒子*/
  .left-box{
    width: 70%;
    /*美容的秘籍*/
    .box-title{
      font-size: 14px;
      font-weight: 600;
      padding:8px 10px 0 10px ;
      /*和下面没有距离*/
    }
    /*299价钱 我把老师下面的合并了*/
    .box-price{
      /*padding-bottom: 10px;*/
      font-family: "Hiragino Sans GB", arial, "Microsoft Yahei", sans-serif;
      margin-right: 0.3rem;
      margin-left: 8px;
      font-size: 18px;
      /*特惠价299的样式*/
      font-weight: bold;
      color: red;
    }
    /*特惠价三个字*/
    .box-price-des{
      background-color: #ffdfcccf;
      font-size: 12px;
      font-weight: bold;
      color: red;
      margin-right: 10px;
      /*padding: 5px;*/
    }
  }

  del {
    /*.card-container .bottom-box .left-box del {*/
    margin-left: 8px;
    font-family: "Hiragino Sans GB", arial, "Microsoft Yahei", sans-serif;
    margin-right: 10px;
    font-size: 11px;
    /*原价的样式*/
    color: rgb(139, 139, 139);
  }

  /*>表示继承 span继承他们两并且有字节的样式*/
  /*第一个卡片抢购的样式*/
  .card-container .bottom-box > span {
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    /*background: rgb(44, 188, 196);*/
    /*border-radius: 15px;*/
    color: white;
    background: rgb(44, 188, 196);
    border-radius: 8px;
    /*-webkit-border-radius: 15px;*/
    /*-moz-border-radius: 15px;*/
    font-family: "Hiragino Sans GB", arial, "Microsoft Yahei", sans-serif;
    font-size: 15px;
    margin-right: 10px;
  }

  .home {
    &-links {
      padding: 15px 0;
      font-size: 12px;
      text-align: center;
      background-color: #fff;
      .van-icon {
        display: block;
        font-size: 24px;
      }
    }
  }
  /*流程检测图片*/
  .home-imgtes{
    margin-bottom: 20px;
  }
  li{
    /*用padding的话会超出整个边框 使屏幕可以左右移动*/
    margin: 10px;
    width: 100%;
    height: 70px;
    /*margin-bottom: 10px;*/
    border-bottom:0.05rem solid #f2f3f5;//画一条分界线
  }
  /*li的span*/
  .li-span{
    width: 100%;
    height: 70px;
    /*li的图片*/
    .li-img{
      float: left;
      width: 20%;
      height: 100%;
    }
    /*li的文字*/
    .li-font{
      /*margin: 8px;*/
      float: right;
      width: 80%;
    }
    /*li标题*/
    .li-title{
      height: 100%;
      font-size: 0.9375rem;
      font-weight: 600;
      margin-bottom: 5px;
      margin-left: 8px;
    }
    .li-describe{
      color: #969799;
      font-size: 13px;
      margin-bottom: 5px;
      margin-left: 8px;
    }
  }
  .footer {
    width: 300px;
    height: 50px;
    margin: 0 auto;
    border: 2px solid #ccc;
    color: #666;
    font-size: 15px;
    margin-top: 5px;
    text-align: center;
    margin-bottom: 55px;
  }
</style>
